<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>编辑人员信息</title>
    <link rel="stylesheet" href="/static/lib/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/css/public.css" media="all">
    <style>
        body {
            background-color: #ffffff;
        }

        .layui-input-block {
            margin-left: 80px;
        }

        .layui-form-label {
            width: 80px;
            padding: 9px 0px;
        }
    </style>
</head>
<body>
<div class="layui-container">
    <form method="post" class="layui-form">

        <div class="layui-form-item">
            <label class="layui-form-label">*工号：</label>
            <div class="layui-input-block">
                <input type="text" id="jobNumber" name="jobNumber" th:value="${emp?.jobNumber}"
                       lay-verify="required" lay-reqtext="工号不能为空"
                       placeholder="请输入工号" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">*员工姓名：</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" th:value="${emp?.name}"
                       lay-verify="required" lay-reqtext="员工姓名不能为空"
                       placeholder="请输入员工姓名" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">性别：</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" checked="checked">
                <input type="radio" name="sex" value="女" title="女" th:checked="${emp?.sex}=='女'">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">证件号码：</label>
            <div class="layui-input-block">
                <input type="text" id="number" name="number" th:value="${emp?.number}"
                       placeholder="请输入证件号码" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">出生日期：</label>
            <div class="layui-input-block">
                <input type="date" id="birthday" name="birthday"
                       th:value="${#dates.format(emp?.birthday, 'yyyy-MM-dd')}" class="layui-input">
                <!--placeholder="yyyy年MM月dd日"-->
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">联系电话：</label>
            <div class="layui-input-block">
                <input type="text" id="telephone" name="telephone" th:value="${emp?.telephone}"
                       placeholder="请输入联系电话" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">所属部门：</label>
            <div class="layui-input-block">
                <input id="deptName" type="text" name="deptName" readonly th:value="${emp?.deptName}"
                       placeholder="请选择部门" class="layui-input" style="width:80%;float:left;">
                <button class="layui-btn layui-bg-gray" type="button" id="dept-clear" style="width:18%;float:right;">清空</button>
            </div>
            <div class="layui-hide">
                <input id="deptId" placeholder="隐藏的部门id" value="0" name="deptId" th:value="${emp?.deptId}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">人员类别：</label>
            <div class="layui-input-block">
                <select id="classes" name="classesId">
                    <option th:each="classe,classes:${classes}"
                            th:value="${classe.value}"
                            th:text="${classe.name}"
                            th:selected="${emp?.classesId == classe.value}"></option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">入职时间：</label>
            <div class="layui-input-block">
                <input type="date" id="entryDate" name="entryDate"
                       th:value="${#dates.format(emp?.entryDate, 'yyyy-MM-dd')}"
                       class="layui-input" placeholder="yyyy年MM月dd日">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">备注：</label>
            <div class="layui-input-block">
                <textarea id="description" name="description" th:utext="${emp?.description}"
                          class="layui-textarea"></textarea>
            </div>
        </div>

        <div class="layui-hide">
            <button type="button" lay-submit id="save" lay-filter="save">确认</button>
        </div>
    </form>
</div>
<script src="/static/lib/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form'], function () {
        var form = layui.form;
        var $ = layui.$;
        //选择部门
        var deptName = $("#deptName");
        var deptId = $("#deptId");
        deptName.click(function () {
            var open = layer.open({
                title: '选择部门',
                type: 2,
                shadeClose: true,
                scrollbar: false,
                area: ['90%', '90%'],
                btn: ['确定', '取消'],
                btnAlign: 'c',
                content: '/sys/dept/select',
                yes: function (index, layero) {
                    var body = layer.getChildFrame('body', index);
                    //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                    var iframeWin = window[layero.find('iframe')[0]['name']];
                    var dept = iframeWin.checkedbox;
                    deptName.val(dept['name']);
                    deptId.val(dept['id']);
                    layer.close(index);
                }
            });
        });

        $("#dept-clear").click(function () {
            deptId.val('0');
            deptName.val('');
        });
    });
</script>
</body>
</html>